<script setup>
import { inject, onMounted, ref } from 'vue'
import haveToken from '@/utils/token/token.js'
import Vrouter from "@/router"
import { MYURL } from '@/utils/express/express.js'
import { getIdolVideo } from '@/api/video/video.js'
import time from '@/utils/time/time.js'
import isToken from '@/utils/token/token.js'
import { videogood, videostar } from '@/api/video/video.js'
const router = Vrouter
const change_icon = inject('change_icon')
onMounted(() => {
   change_icon(1, 'action')
})
const login = () => {
   router.push('/login')
}
const VideoList = ref([])
getIdolVideo().then(res => {
   if (!isToken()) return VideoList.value = []
   let result = res.data.message
   if (res.data.status === 1) return
   for (let i = 0; i < result.length; i++) {
      result[i].good === null ? result[i].good = 0 : result[i].good = result[i].good.split(',').length
      result[i].star === null ? result[i].star = 0 : result[i].star = result[i].star.split(',').length
   }
   VideoList.value = result
})
const good = (id, index) => {
   if (!isToken()) return router.push('/login');
   const data = {
      id: id
   }
   videogood(data).then((res) => {
      if (res.data.state) {
         VideoList.value[index].isGood = true
         VideoList.value[index].good++ 
      } else {
         VideoList.value[index].isGood = false
         VideoList.value[index].good--
      }
   })
}
const star = (id, index) => {
   if (!isToken()) return router.push('/login');
   const data = {
      id: id
   }
   videostar(data).then((res) => {
      if (res.data.state) {
         VideoList.value[index].isStar = true
         VideoList.value[index].star++ 
      } else {
         VideoList.value[index].isStar = false
         VideoList.value[index].star--
      }
   })
}
</script>

<template>
   <div v-show="!haveToken()">
      <div class="login-out">
         <div class="action-top-nav">
            <p>动态</p>
            <img src="@/assets/img/bianji.png">
         </div>
      </div>
      <div class="action-top-nav-placeholder"></div>
      <div class="login-out-main">
         <p>你还未登录</p>
         <p>登陆账号，查看你关注的UP主内容</p>
         <p @click="login">登录</p>
      </div>
   </div>

   <div class="video_empty" v-show="haveToken()">
      <div v-show="VideoList.length === 0">
         <IsEmpty>还没有up发布视频哦</IsEmpty>
      </div>
      <div class="back-ground"></div>
      <div class="video_main" v-for="video, index in VideoList" :key="video.id">
         <div class="nav-top" @click="router.push(`/personal?up=${video.up}`)">
            <img :src="`${MYURL}/public/profiles/${video.profile}`">
            <div>
               <p class="up_name">{{ video.username }}</p>
               <div>
                  <p class="time">{{ time(parseInt(video.time))[2] }}</p>
                  <p style="font-size: 17px;">·</p>
                  <p class="time_text">投稿了视频</p>
               </div>
            </div>
            <img class="more" src="@/assets/img/more.png" alt="">
         </div>
         <div class="nav_img" @click="router.push(`videodetail?id=${video.id}`)">
            <img class="nav_img" :src="`${MYURL}/public/videoimages/${video.image}`">
            <!-- <p class="video_time">00:32</p> -->
         </div>
         <p @click="router.push(`videodetail?id=${video.id}`)" class="nav_title">{{ video.title }}</p>
         <div class="nav_btm">
            <div @click="star(video.id, index)">
               <img :src="`${MYURL}/public/icon/activestar${video.isStar ? 'active' : ''}.png`">
               <p>{{ video.star != 0 ? video.star : '收藏' }}</p>
            </div>
            <div>
               <img @click="router.push(`videodetail?id=${video.id}`)" src="@/assets/img/comment.png">
               <p>{{ video.commentCount }}</p>
            </div>
            <div @click="good(video.id, index)">
               <img :src="`${MYURL}/public/icon/activegood${video.isGood ? 'active' : ''}.png`">
               <p>{{ video.good != 0 ? video.good : '点赞' }}</p>
            </div>
         </div>
      </div>
   </div>
</template>

<style scoped lang="less">
.back-ground {
   position: fixed;
   top: 0;
   left: 0;
   background-color: #f2f3f5;
   width: 100vw;
   height: 100vh;
   z-index: -1;
}

.action-top-nav {
   padding-top: 5px;
   width: 100%;
   background-color: white;
   display: flex;
   align-items: center;
   padding-bottom: 5px;
   border-bottom: 1px rgba(0, 0, 0, 0.092) solid;
   position: fixed;
   top: 0;
   left: 0;

   p {
      // transform: translate(-50%, 0);
      // font-weight: 600;
      font-size: 18px;
      margin: 0 auto;
   }

   img {
      width: 20px;
      margin-right: 2%;
   }
}

.action-top-nav-placeholder {
   height: 45px;
   width: 100%;
}

.login-out-main {
   margin-top: 60px;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;

   p:nth-child(1) {
      font-weight: 600;
   }

   p:nth-child(2) {
      font-size: 14px;
      color: rgba(0, 0, 0, 0.40);
   }

   p:nth-child(3) {
      border-radius: 5px;
      text-align: center;
      width: 80%;
      font-size: 16px;
      background-color: var(--bilibili-pink);
      padding: 10px;
      color: white;
   }
}



.video_main {
   margin-top: 10px;
   width: 100%;
   background-color: white;
   padding: 5px 10px 10px 10px;

   .nav-top {
      width: 100%;
      display: flex;
      gap: 10px;
      align-items: center;

      img {
         width: 40px;
         height: 40px;
         border-radius: 50%;
      }

      >div {
         display: flex;
         flex-direction: column;
         justify-content: center;
         width: 60%;
      }

      .up_name {
         font-size: 14px;
         color: var(--bilibili-pink);
         font-weight: 600;
         text-overflow: ellipsis;
         overflow: hidden;
         word-break: break-all;
         white-space: nowrap;
      }

      >div>div {
         line-height: 15px;
         display: flex;
         align-items: center;
         gap: 5px;
         color: #9b9fa4;
         font-size: 12px;
      }

      .more {
         margin-left: auto;
         width: 30px;
         height: 30px;
      }
   }

   .nav_img {
      position: relative;

      img {
         margin-top: 5px;
         width: 100%;
         height: 50vw;
         border-radius: 6px;
      }

      .video_time {
         position: absolute;
         left: 2%;
         bottom: 5%;
         font-size: 12PX;
         line-height: 15px;
         border-radius: 3px;
         padding: 0 5px;
         color: rgba(255, 255, 255, .9);
         background-color: rgba(0, 0, 0, 0.60);
      }
   }



   .nav_title {
      font-size: 15px;
      font-weight: 600;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
   }

   .nav_btm {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      img {
         width: 20px;
      }

      color: #62666d;

      >div {
         display: flex;
         gap: 5px;
         align-items: center;
      }
   }
}
</style>
